<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue练习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 
			type="text/javascript"></script>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
			type="text/javascript"></script>

			<style>
				.fade-enter-active,.fade-leave-active{
					transition: opacity 2s
				}
				.fade-enter, .fade-leave-to{
					opacity: 0
				}
			</style>
	</head>

	<body>
		<div id="myVue">
			<p>======单向绑定======</p>
			<h4>{{title}}</h4>
			<p v-html="htmlString"></p>
			<p>
				<label>用户ID：</label>
				<input type="text" :value="'userId_' + user.id" />
			</p>
			<p>
				<label>用户名：</label>
				<input type="text" :value="user.userName"/>
			</p>
			<p>
				<label>密码：</label>
				<input type="password" :value="user.password"/>
			</p>
			<p :style="{color:color}">用户名：{{user.userName}}</p>
			<p :style="style">用户名：{{user.userName}}</p>
			<p>年龄：{{user.age}}</p>

			<p>======双向绑定======</p>
			<p>
				<label>用户名：</label>
				<input type="text" v-model.trim="user.userName" />
			</p>
			<p>
				<label >密码：</label>
				<input type="password" v-model.number="user.age"/>
			</p>
			<p>
				<label>年龄：</label>
				<input type="text" v-model.number="user.age" />
			</p>

			<p>======计算器======</p>
			<p><span>{{capitalize}}</span></p>

			<p>======监听器======</p>
			<p>
				<label>Title:</label>
				<input type="text" v-model="title" />
			</p>
			<p>
				<label>用户名：</label>
				<input type="text" v-model="user.userName" />
			</p>
			<p>
				<span style="color: red;">{{error}}</span>
			</p>

			<p>======事件绑定======</p>
			<p>
				<button @click="user.age">按钮1</button>
				<button @click="test1()">按钮2</button>
				<button @click="test2('Tangjinhu',$event)" 
					name="but2" value="11111" myDate="society">按钮3</button>
			</p>

			<p>======动画过渡======</p>
			<button @click="show = ！show">按钮4</button>
			<transition name="show">
				<p v-show="show">动画效果</p>
			</transition>

			<p>======条件渲染======</p>
			<p>
				<span v-if="user.age > 18" >成年人</span>
				<span v-else>儿童</span>
			</p>
			<p>
				<span v-show="show">这是一个框框</span>
			</p>

			<p>======循环渲染======</p>
			<p>
				<ul>
					<li v-for="item in roles" :key="item.id">
						{{item.roleName}}
					</li>
				</ul>
			</p>
			<p>
				<ul>
					<li v-for="(item, index) in roles">
						:key="item.id"{{index}}_{{item.roleName}}
					</li>
				</ul>
			</p>
			<p>
				<select>
					<option v-for="(item,index) in roles" :key="item.id"
					:key="item.id">{{item.roleName}}</option>
				</select>
			</p>
			<p>
				<table>
					<tr><td>ID</td><td>RoleName</td></tr>
					<tr v-for="(item,index) in roles" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.roleName}}</td>
					</tr>
				</table>
			</p>
		</div>
		<script>
			$(function(){
				test4();
			});

			Vue.fliter("filter2",function(value){
				if(!value){
					return "";
				}
				return value.replace("u","-")
			});
			var myVue = new Vue({
				el: "#myVue",
				data: {
					title: "This is Vue Test Page. ",
					htmlString: "<span style='color:red;'>我爱你中国！</span>",
					error:"",
					color:"blue",
					style:{color:"yellow"},
					show:false,
					user: {
						id: 1,
						userName: "Tangjinhu",
						age: 18,
						password: "111111",
						gender: "male",
					},
					roles: [
						{ id: 1, roleName: "admin" },
						{ id: 2, roleName: "manager" },
						{ id: 3, roleName: "staff" },
					],
				},
				methods: {
					test1: function(){
						console.log("This is test 1 function");
					},
					test2: function(name,event){
						console.log(name);
						if(event){
							var target = event.currentTarget;
							//标签自带属性取法
							console.log(target.name);
							console.log(target.value);
							//目标对象，自定义属性取法
							console.log(target.attributes.getNameItem("myData").name);
							console.log(target.attributes.getNameItem("myData").value);
						}
					},
					test3: function(){
						console.log("挂载生命周期方法1");
					},
					test4: function(){
						console.log("挂载生命周期方法2");
					},
					getUserById: function(){
						var self = this;
						$.ajax({
							url:"http://www.sfac.xyz/api/user/1",
							type:"get",
							success: function(rs) {
								self.user = rs;
							},
							error: function(rs) {
								console.log(rs);
							}
						})
					}
				},	
				watch:{
					title(newValue,oldValue){
						this.error = newValue.lenth > 6 ? "太长了" :"";
					},
					'user.userName'(newValue,oldValue){
						this.error=this.user.userName.lenth > 6 ? "用户名大于6" :"合格";
					},
				},
				computed: {
					capitalize:function(){
						return this.user.userName[0].toUpperCase()+this.user.userName.substr(1);
					}
				},
				filters: {
					filter1: function(value) {
						if (!value) {
							return "";
						}
						return value.replace("a", "_");
					}
				},
				// 通过 created 生命周期，将 vue 实例定义的 test4 方法，赋值给 window test4 函数
				created () {
					window.test4 = this.test4;
				},
				mounted () {
					this.test3();
					this.getUserById();
				}
			});
		</script>
	</body>
</html>
